<template>
    <div class="login_body">
        <div class="login_box">
            <img src="../../assets/image/admin/login_logo.png" class="logo">
            <div class="title">{{title}}</div>
            <div class="login_form">
                <input type="text" @keyup.enter="handleLogin" id="user" v-model="account" placeholder="账号"/>
                <input type="password" @keyup.enter="handleLogin" id="password" v-model="password"
                       placeholder="密码"/>
                <div class="yzm">
                    <input @keyup.enter="handleLogin" type="text" id="yzm" v-model="inputCode"
                           placeholder="验证码"/>
                    <div @click="updateCode">
                        <MiCaptcha class="yzmImg" :identifyCode="showCode"/>
                    </div>
                </div>
                <button type="button" id="login" @click="handleLogin">登录</button>
            </div>
        </div>
    </div>

</template>

<script lang="ts">

    import {Component, Watch} from 'vue-property-decorator'
    import {Route} from 'vue-router'
    import {API} from "@/core/api/API";
    import MiCaptcha from "@/components/Captcha/MiCaptcha.vue";
    import {errorMsg, warningMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {Dictionary} from "vue-router/types/router";
    import settings from "@/core/config/settings";
    import {setMenus, setMenusPath, setRefreshToken, setRoles, setToken, setUserInfo} from "@/core/utils/storage";
    import {TagsViewModule} from "@/core/store/modules/tags-view";
    import {arrangeMenu, md5, tree} from "@/core/utils/Utils";

    /**
     * 旧的登录页
     */
    @Component({
        name: 'LoginOld',
        components: {MiCaptcha}
    })
    export default class LoginOld extends mixins(BaseVue, Kit) {
        title = settings.title;
        showCode = "";

        // account = "admin";
        // password = "1234qwer";
        account = "";
        password = "";
        inputCode = "";

        mounted() {
            this.updateCode();
            this.inputCode = this.showCode;
        }

        activated() {
            this.updateCode();
        }

        updateCode() {
            let random = Math.random() + "";
            this.showCode = random.substr(2, 4);
        }

        handleLogin() {
            if (this.check()) {
                let password = md5(this.account + this.password).toUpperCase();
                $http.post(API.sysUserLogin, {account: this.account, password: password})
                    .then((res: any) => {
                        if (res.success) {
                            this.account = "";
                            this.password = "";
                            setToken(res.data.token);
                            setRefreshToken(res.data.refreshToken);
                            setUserInfo(res.data.userInfo);
                            setRoles(res.data.roles);

                            //更新路由
                            let menuObj: any = arrangeMenu(res.data.menus);
                            setMenus(tree(menuObj.mMenus));
                            setMenusPath(menuObj.menusPath);

                            TagsViewModule.delAllCachedViews();
                            TagsViewModule.delAllViews();
                            // window.location.reload();
                            this.go("/index");
                            // setTimeout(() => {
                            //     this.$router.push({path: this.redirect || '/', query: this.otherQuery});
                            //     this.loading = false;
                            // }, 100);
                            // return;
                        }
                        this.inputCode = "";
                        this.updateCode();
                    });
            }
        }

        check() {
            if (!this.account || this.account.length <= 0) {
                warningMsg("请输入账号");
                return false;
            }
            if (!this.password || this.password.length <= 0) {
                warningMsg("请输入密码");
                return false;
            }
            if (!this.inputCode || this.inputCode.length <= 0) {
                warningMsg("请输入验证码");
                return false;

            }
            if (this.account.length < 5) {
                errorMsg("账号输入错误");
                return false;
            }
            if (this.password.length < 5) {
                errorMsg("密码输入错误");
                return false;

            }
            if (this.inputCode != this.showCode) {
                errorMsg("验证码输入错误");
                return false;
            }
            return true;
        }

        private redirect?: string;
        private otherQuery: Dictionary<string> = {};

        @Watch('$route', {immediate: true})
        private onRouteChange(route: Route) {
            const query = route.query as Dictionary<string>;
            if (query) {
                this.redirect = query.redirect;
                this.otherQuery = this.getOtherQuery(query);
            }
        }

        private getOtherQuery(query: Dictionary<string>) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {} as Dictionary<string>)
        }


    }
</script>

<style lang="scss" scoped>
    .login_body {
        width: 100%;
        height: 100vh;
        background: url(../../assets/image/admin/login_bg.jpg) repeat-x;
        background-size: auto 100%;
        position: relative;
    }

    .login_box {
        position: absolute;
        background-color: #6b56d8;
        width: 500px;
        height: 440px;
        top: 50%;
        left: 50%;
        margin: -220px auto auto -250px;
        border-radius: 10px;
    }

    .login_box .title {
        text-align: center;
        font-size: 24px;
        color: #fff;
        padding: 30px 0;
    }

    input:focus {
        outline: none;
    }

    .login_form #user,
    .login_form #password,
    .login_form #yzm {
        width: 70%;
        display: block;
        margin: auto;
        border: 0;
        padding: 15px 20px;
        border-radius: 5px;
        padding-left: 60px;
        font-size: 16px;
        margin-bottom: 20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .login_form #user {
        background: #fff url(../../assets/image/admin/login_user.png) no-repeat 18px center;
        background-size: 18px;
    }

    .login_form #password {
        background: #fff url(../../assets/image/admin/login_password.png) no-repeat 18px center;
        background-size: 18px;
    }

    .login_form #yzm {
        background: #fff url(../../assets/image/admin/login_valid_code.png) no-repeat 18px center;
        background-size: 18px;
    }

    .yzm {
        position: relative;
    }

    .yzmImg {
        position: absolute;
        height: 100%;
        width: 120px;
        background: rgba(0, 0, 0, 1);
        right: 15%;
        top: 0;
        z-index: 2;
    }

    .yzm #yzm {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    button {
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
    }

    .login_form #login {
        background: #eb4405;
        display: block;
        width: 70%;
        margin: auto;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
        padding: 15px 20px;
        margin-top: 60px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .login_form #login:hover {
        background: #db440b;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .logo {
        position: absolute;
        top: -63px;
        width: 341px;
        left: 50%;
        margin-left: -170px;
        z-index: 0;
    }
</style>
